<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="500" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters for the drawing
    const centerX = 200;
    const centerY = 250;
    const lengthL = 120; // Pixel representation for L
    const massRadius = 6;
    const midPointRadius = 4;
    const forceVectorLength = 100;
    const arrowHeadLength = 12;
    const arrowHeadWidth = 6;

    // Set common styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Draw the vertical light rope ---
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - lengthL);
    ctx.lineTo(centerX, centerY + lengthL);
    ctx.stroke();

    // --- Draw the masses (m) ---
    // Top mass
    ctx.beginPath();
    ctx.arc(centerX, centerY - lengthL, massRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Bottom mass
    ctx.beginPath();
    ctx.arc(centerX, centerY + lengthL, massRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw the midpoint ---
    ctx.beginPath();
    ctx.arc(centerX, centerY, midPointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw the force vector (F) ---
    const forceStartX = centerX;
    const forceStartY = centerY;
    const forceEndX = forceStartX + forceVectorLength;
    const forceEndY = forceStartY;

    // Draw the vector line
    ctx.beginPath();
    ctx.moveTo(forceStartX, forceStartY);
    ctx.lineTo(forceEndX, forceEndY);
    ctx.stroke();

    // Draw the arrowhead
    ctx.beginPath();
    ctx.moveTo(forceEndX, forceEndY);
    ctx.lineTo(forceEndX - arrowHeadLength, forceEndY - arrowHeadWidth);
    ctx.lineTo(forceEndX - arrowHeadLength, forceEndY + arrowHeadWidth);
    ctx.closePath();
    ctx.fill();

    // --- Draw the labels ---
    ctx.fillStyle = 'black';

    // Label 'm' for masses
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('m', centerX, centerY - lengthL - 8);
    ctx.textBaseline = 'top';
    ctx.fillText('m', centerX, centerY + lengthL + 8);

    // Label 'L' for lengths
    ctx.font = 'italic 28px Times New Roman';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('L', centerX - 20, centerY - lengthL / 2);
    ctx.fillText('L', centerX - 20, centerY + lengthL / 2);

    // Label 'F' for force
    ctx.font = 'italic bold 30px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('F', forceEndX + 15, forceEndY);

</script>
</body>
</html>